<!--
 * @Description:表格筛选
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-04 22:24:49
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>表格筛选</title>
	<style>

	</style>
	<script>
		//tBodies 可以多个 tHead tFoot 是元素 只能一个
		window.onload = function () {
			let otab = document.getElementById("tab1")
			let obtn = document.getElementById("bt1")
			obtn.onclick = function () {
				var arr=[]
				for (let index = 0; index < otab.tBodies[0].rows.length; index++) {
				arr[index]=otab.tBodies[0].rows[index]
				}
				arr.sort(function(tr1,tr2){
           var n1=parseInt(tr1.cells[2].innerText)
					 var n2=parseInt(tr2.cells[2].innerText)
					 return n1-n2
				})
        
				for (let index1 = 0; index1 < arr.length; index1++) {
					otab.tBodies[0].appendChild(arr[index1])
				}


			}
		}
	</script>
</head>

<body>
	<div>
		tBodies 可以多个&nbsp; tHead tFoot 是元素 只能一个 <br>
		tBodies rows cells tHead tFoot
	</div>
	姓名：<input id="names" type="text">
	<button id="bt1">排序</button>
	<table id="tab1" border="1" width="500">
		<thead>
			<tr>
				<td>ID</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>20</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>22</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>18</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>4</td>
				<td>王麻子</td>
				<td>22</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>5</td>
				<td>Sun</td>
				<td>24</td>
				<td>操作</td>
			</tr>
		</tbody>
	</table>

</body>

</html>